<template>
  <div>
    <group title="XInput组件">
      <x-input title="必填" v-model="value" required></x-input>
      <x-input title="max&min" placeholder="（min不起作用？）" :min="2" :max="5" ></x-input>
      <x-input title="text-align" placeholder="右对齐"  text-align="right"></x-input>
      <x-input title="debounce=500" placeholder="延迟触发onchange事件500ms" @on-change="change" :debounce="500"></x-input>
      <x-input title="不显示" placeholder="清除按钮" :show-clear="false" ></x-input>
      <x-input title="按钮设置" placeholder="slot=right">
        <x-button slot="right" type="primary" mini>miniBtn</x-button>
      </x-input>
    </group>
    <group title="输入验证">
      <x-input title="邮箱" placeholder="email" is-type="email" ></x-input>
      <x-input title="中文名" placeholder="china-name" is-type="china-name" ></x-input>
      <x-input title="手机号" placeholder="china-mobile" is-type="china-mobile" ></x-input>
    </group>
    <group>
      <x-input title="enter事件" placeholder="enter触发" @on-enter="enter"></x-input>
    </group>
  </div>
</template>
<script>
    import { Group, XInput, XButton } from 'vux'
    export default {
        name: 'input',
        components: {
          Group,
          XInput,
          XButton
        },
        data() {
          return {
            value: 0,
            max: 5,
            min: 3,
            showClear: false
          }
        },
        methods: {
          change(val){
              console.log(val)
          },
          enter(val){
            console.log(val)
            console.log(this.$refs); // 访问data对象
          }
        }
    }
</script>
<style>
</style>
